<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

<html><head><title>mootree.js</title><link rel="stylesheet" type="text/css" href="../styles/main.css"><script language=JavaScript src="../javascript/main.js"></script><script language=JavaScript src="../javascript/searchdata.js"></script></head><body class="ContentPage" onLoad="NDOnLoad()"><script language=JavaScript><!--
if (browserType) {document.write("<div class=" + browserType + ">");if (browserVer) {document.write("<div class=" + browserVer + ">"); }}// --></script>

<!--  Generated by Natural Docs, version 1.4 -->
<!--  http://www.naturaldocs.org  -->

<!-- saved from url=(0026)http://www.naturaldocs.org -->




<div id=Content><div class="CFile"><div class=CTopic id=MainTopic><h1 class=CTitle><a name="mootree.js"></a>mootree.js</h1><div class=CBody><p>My Object Oriented Tree</p><ul><li>Developed by Rasmus Schultz, <a href="http://www.mindplay.dk" class=LURL target=_top>http://www.mindplay.dk</a></li><li>Tested with MooTools release 1.2, under Firefox 2, Opera 9 and Internet Explorer 6 and 7.</li></ul><h4 class=CHeading>License</h4><p>MIT-style license.</p><h4 class=CHeading>Credits</h4><p>Inspired by:</p><ul><li>WebFX xTree, <a href="http://webfx.eae.net/dhtml/xtree/" class=LURL target=_top>http://webfx.eae.net/dhtml/xtree/</a></li><li>Destroydrop dTree, <a href="http://www.destroydrop.com/javascripts/tree/" class=LURL target=_top>http://www.destroydrop.com/javascripts/tree/</a></li></ul><h4 class=CHeading>Changes</h4><h4 class=CHeading>rev.12</h4><ul><li>load() only worked once on the same node, fixed.</li><li>the script would sometimes try to get &lsquo;R&rsquo; from the server, fixed.</li><li>the &lsquo;load&rsquo; attribute is now supported in XML files (see example_5.html).</li></ul><h4 class=CHeading>rev.13</h4><ul><li>enable() and disable() added - the adopt() and load() methods use these to improve performance by minimizing the number of visual updates.</li></ul><h4 class=CHeading>rev.14</h4><ul><li>toggle() was using enable() and disable() which actually caused it to do extra work - fixed.</li></ul><h4 class=CHeading>rev.15</h4><ul><li>adopt() now picks up &lsquo;href&rsquo;, &lsquo;target&rsquo;, &lsquo;title&rsquo; and &lsquo;name&rsquo; attributes of the a-tag, and stores them in the data object.</li><li>adopt() now picks up additional constructor arguments from embedded comments, e.g. icons, colors, etc.</li><li>documentation now generates properly with NaturalDocs, <a href="http://www.naturaldocs.org/" class=LURL target=_top>http://www.naturaldocs.org/</a></li></ul><h4 class=CHeading>rev.16</h4><ul><li>onClick events added to MooTreeControl and MooTreeNode</li><li>nodes can now have id&rsquo;s - <a href="#MooTreeControl.get" class=LProperty >MooTreeControl.get</a> method can be used to find a node with a given id</li></ul><h4 class=CHeading>rev.17</h4><ul><li>changed icon rendering to use innerHTML, making the control faster (and code size slightly smaller).</li></ul><h4 class=CHeading>rev.18</h4><ul><li>migrated to MooTools 1.2 (previous versions no longer supported)</li></ul><!--START_ND_SUMMARY--><div class=Summary><div class=STitle>Summary</div><div class=SBorder><table border=0 cellspacing=0 cellpadding=0 class=STable><tr class="SMain"><td class=SEntry><a href="#mootree.js" >mootree.js</a></td><td class=SDescription>My Object Oriented Tree</td></tr><tr class="SClass"><td class=SEntry><a href="#MooTreeControl" >MooTreeControl</a></td><td class=SDescription>This class implements a tree control.</td></tr><tr class="SGroup SIndent1"><td class=SEntry><a href="#MooTreeControl.Properties" >Properties</a></td><td class=SDescription></td></tr><tr class="SProperty SIndent2 SMarked"><td class=SEntry><a href="#MooTreeControl.insert" >insert</a></td><td class=SDescription>Creates a new node under the root node of this tree.</td></tr><tr class="SProperty SIndent2"><td class=SEntry><a href="#MooTreeControl.select" >select</a></td><td class=SDescription>Sets the currently selected node. </td></tr><tr class="SProperty SIndent2 SMarked"><td class=SEntry><a href="#MooTreeControl.expand" >expand</a></td><td class=SDescription>Expands the entire tree, recursively.</td></tr><tr class="SProperty SIndent2"><td class=SEntry><a href="#MooTreeControl.collapse" >collapse</a></td><td class=SDescription>Collapses the entire tree, recursively.</td></tr><tr class="SProperty SIndent2 SMarked"><td class=SEntry><a href="#MooTreeControl.get" >get</a></td><td class=SDescription></td></tr><tr class="SProperty SIndent2"><td class=SEntry><a href="#MooTreeControl.adopt" >adopt</a></td><td class=SDescription>Adopts a structure of nested ul/li/a elements as tree nodes, then removes the original elements.</td></tr><tr class="SProperty SIndent2 SMarked"><td class=SEntry><a href="#MooTreeControl.disable" >disable</a></td><td class=SDescription>Call this to temporarily disable visual updates -- if you need to insert/remove many nodes at a time, many visual updates would normally occur. </td></tr><tr class="SProperty SIndent2"><td class=SEntry><a href="#MooTreeControl.enable" >enable</a></td><td class=SDescription>Enables visual updates again after a call to <a href="#MooTreeControl.disable" class=LProperty id=link1 onMouseOver="ShowTip(event, 'tt1', 'link1')" onMouseOut="HideTip('tt1')">MooTreeControl.disable</a></td></tr><tr class="SClass"><td class=SEntry><a href="#MooTreeNode" >MooTreeNode</a></td><td class=SDescription>This class implements the functionality of a single node in a <a href="#MooTreeControl" class=LClass id=link2 onMouseOver="ShowTip(event, 'tt2', 'link2')" onMouseOut="HideTip('tt2')">MooTreeControl</a>.</td></tr><tr class="SGroup SIndent1"><td class=SEntry><a href="#MooTreeNode.Properties" >Properties</a></td><td class=SDescription></td></tr><tr class="SProperty SIndent2 SMarked"><td class=SEntry><a href="#MooTreeNode.insert" >insert</a></td><td class=SDescription>Creates a new node, nested inside this one.</td></tr><tr class="SProperty SIndent2"><td class=SEntry><a href="#MooTreeNode.remove" >remove</a></td><td class=SDescription>Removes this node, and all of it&rsquo;s child nodes. </td></tr><tr class="SProperty SIndent2 SMarked"><td class=SEntry><a href="#MooTreeNode.clear" >clear</a></td><td class=SDescription>Removes all child nodes under this node, without removing the node itself. </td></tr><tr class="SProperty SIndent2"><td class=SEntry><a href="#MooTreeNode.update" >update</a></td><td class=SDescription>Update the tree node&rsquo;s visual appearance.</td></tr><tr class="SProperty SIndent2 SMarked"><td class=SEntry><a href="#MooTreeNode.getImg" >getImg</a></td><td class=SDescription>Creates a new image, in the form of HTML for a DIV element with appropriate style. </td></tr><tr class="SProperty SIndent2"><td class=SEntry><a href="#MooTreeNode.toggle" >toggle</a></td><td class=SDescription>By default (with no arguments) this function toggles the node between expanded/collapsed. </td></tr><tr class="SProperty SIndent2 SMarked"><td class=SEntry><a href="#MooTreeNode.select" >select</a></td><td class=SDescription>Called by <a href="#MooTreeControl" class=LClass id=link3 onMouseOver="ShowTip(event, 'tt2', 'link3')" onMouseOut="HideTip('tt2')">MooTreeControl</a> when the selection changes. </td></tr><tr class="SProperty SIndent2"><td class=SEntry><a href="#MooTreeNode.load" >load</a></td><td class=SDescription>Asynchronously load an XML structure into a node of this tree.</td></tr></table></div></div><!--END_ND_SUMMARY--></div></div></div>

<div class="CClass"><div class=CTopic><h2 class=CTitle><a name="MooTreeControl"></a>MooTreeControl</h2><div class=CBody><p>This class implements a tree control.</p><h4 class=CHeading>Properties</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>root</td><td class=CDLDescription>returns the root <a href="#MooTreeNode" class=LClass id=link5 onMouseOver="ShowTip(event, 'tt3', 'link5')" onMouseOut="HideTip('tt3')">MooTreeNode</a> object.</td></tr><tr><td class=CDLEntry>selected</td><td class=CDLDescription>returns the currently selected <a href="#MooTreeNode" class=LClass id=link6 onMouseOver="ShowTip(event, 'tt3', 'link6')" onMouseOut="HideTip('tt3')">MooTreeNode</a> object, or null if nothing is currently selected.</td></tr></table><h4 class=CHeading>Events</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>onExpand</td><td class=CDLDescription>called when a node is expanded or collapsed: function(node, state) - where node is the <a href="#MooTreeNode" class=LClass id=link7 onMouseOver="ShowTip(event, 'tt3', 'link7')" onMouseOut="HideTip('tt3')">MooTreeNode</a> object that fired the event, and state is a boolean meaning true:expanded or false:collapsed.</td></tr><tr><td class=CDLEntry>onSelect</td><td class=CDLDescription>called when a node is selected or deselected: function(node, state) - where node is the <a href="#MooTreeNode" class=LClass id=link8 onMouseOver="ShowTip(event, 'tt3', 'link8')" onMouseOut="HideTip('tt3')">MooTreeNode</a> object that fired the event, and state is a boolean meaning true:selected or false:deselected.</td></tr><tr><td class=CDLEntry>onClick</td><td class=CDLDescription>called when a node is clicked: function(node) - where node is the <a href="#MooTreeNode" class=LClass id=link9 onMouseOver="ShowTip(event, 'tt3', 'link9')" onMouseOut="HideTip('tt3')">MooTreeNode</a> object that fired the event.</td></tr></table><h4 class=CHeading>Parameters</h4><p>The constructor takes two object parameters: config and options.&nbsp; The first, config, contains global settings for the tree control - you can use the configuration options listed below.&nbsp; The second, options, should contain options for the <a href="#MooTreeNode" class=LClass id=link10 onMouseOver="ShowTip(event, 'tt3', 'link10')" onMouseOut="HideTip('tt3')">MooTreeNode</a> constructor - please refer to the options listed in the <a href="#MooTreeNode" class=LClass id=link11 onMouseOver="ShowTip(event, 'tt3', 'link11')" onMouseOut="HideTip('tt3')">MooTreeNode</a> documentation.</p><h4 class=CHeading>Config</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>div</td><td class=CDLDescription>a string representing the div Element inside which to build the tree control.</td></tr><tr><td class=CDLEntry>mode</td><td class=CDLDescription>optional string, defaults to &lsquo;files&rsquo; - specifies default icon behavior.&nbsp; In &lsquo;files&rsquo; mode, empty nodes have a document icon - whereas, in &lsquo;folders&rsquo; mode, all nodes are displayed as folders (a&rsquo;la explorer).</td></tr><tr><td class=CDLEntry>grid</td><td class=CDLDescription>boolean, defaults to false.&nbsp; If set to true, a grid is drawn to outline the structure of the tree.</td></tr><tr><td class=CDLEntry>theme</td><td class=CDLDescription>string, optional, defaults to &lsquo;mootree.gif&rsquo; - specifies the &lsquo;theme&rsquo; GIF to use.</td></tr><tr><td class=CDLEntry>loader</td><td class=CDLDescription>optional, an options object for the <a href="#MooTreeNode" class=LClass id=link12 onMouseOver="ShowTip(event, 'tt3', 'link12')" onMouseOut="HideTip('tt3')">MooTreeNode</a> constructor - defaults to {icon:&rsquo;mootree_loader.gif&rsquo;, text:&rsquo;Loading...&rsquo;, color:&rsquo;a0a0a0&rsquo;}</td></tr><tr><td class=CDLEntry>onExpand</td><td class=CDLDescription>optional function (see Events above)</td></tr><tr><td class=CDLEntry>onSelect</td><td class=CDLDescription>optional function (see Events above)</td></tr></table><!--START_ND_SUMMARY--><div class=Summary><div class=STitle>Summary</div><div class=SBorder><table border=0 cellspacing=0 cellpadding=0 class=STable><tr class="SGroup"><td class=SEntry><a href="#MooTreeControl.Properties" >Properties</a></td><td class=SDescription></td></tr><tr class="SProperty SIndent1 SMarked"><td class=SEntry><a href="#MooTreeControl.insert" >insert</a></td><td class=SDescription>Creates a new node under the root node of this tree.</td></tr><tr class="SProperty SIndent1"><td class=SEntry><a href="#MooTreeControl.select" >select</a></td><td class=SDescription>Sets the currently selected node. </td></tr><tr class="SProperty SIndent1 SMarked"><td class=SEntry><a href="#MooTreeControl.expand" >expand</a></td><td class=SDescription>Expands the entire tree, recursively.</td></tr><tr class="SProperty SIndent1"><td class=SEntry><a href="#MooTreeControl.collapse" >collapse</a></td><td class=SDescription>Collapses the entire tree, recursively.</td></tr><tr class="SProperty SIndent1 SMarked"><td class=SEntry><a href="#MooTreeControl.get" >get</a></td><td class=SDescription></td></tr><tr class="SProperty SIndent1"><td class=SEntry><a href="#MooTreeControl.adopt" >adopt</a></td><td class=SDescription>Adopts a structure of nested ul/li/a elements as tree nodes, then removes the original elements.</td></tr><tr class="SProperty SIndent1 SMarked"><td class=SEntry><a href="#MooTreeControl.disable" >disable</a></td><td class=SDescription>Call this to temporarily disable visual updates -- if you need to insert/remove many nodes at a time, many visual updates would normally occur. </td></tr><tr class="SProperty SIndent1"><td class=SEntry><a href="#MooTreeControl.enable" >enable</a></td><td class=SDescription>Enables visual updates again after a call to <a href="#MooTreeControl.disable" class=LProperty id=link4 onMouseOver="ShowTip(event, 'tt1', 'link4')" onMouseOut="HideTip('tt1')">MooTreeControl.disable</a></td></tr></table></div></div><!--END_ND_SUMMARY--></div></div></div>

<div class="CGroup"><div class=CTopic><h3 class=CTitle><a name="MooTreeControl.Properties"></a>Properties</h3></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="MooTreeControl.insert"></a>insert</h3><div class=CBody><p>Creates a new node under the root node of this tree.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>options</td><td class=CDLDescription>an object containing the same options available to the <a href="#MooTreeNode" class=LClass id=link13 onMouseOver="ShowTip(event, 'tt3', 'link13')" onMouseOut="HideTip('tt3')">MooTreeNode</a> constructor.</td></tr></table><h4 class=CHeading>Returns</h4><p>A new <a href="#MooTreeNode" class=LClass id=link14 onMouseOver="ShowTip(event, 'tt3', 'link14')" onMouseOut="HideTip('tt3')">MooTreeNode</a> instance.</p></div></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="MooTreeControl.select"></a>select</h3><div class=CBody><p>Sets the currently selected node.&nbsp; This is called by <a href="#MooTreeNode" class=LClass id=link15 onMouseOver="ShowTip(event, 'tt3', 'link15')" onMouseOut="HideTip('tt3')">MooTreeNode</a> when a node is selected (e.g. by clicking it&rsquo;s title with the mouse).</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>node</td><td class=CDLDescription>the <a href="#MooTreeNode" class=LClass id=link16 onMouseOver="ShowTip(event, 'tt3', 'link16')" onMouseOut="HideTip('tt3')">MooTreeNode</a> object to select.</td></tr></table></div></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="MooTreeControl.expand"></a>expand</h3><div class=CBody><p>Expands the entire tree, recursively.</p></div></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="MooTreeControl.collapse"></a>collapse</h3><div class=CBody><p>Collapses the entire tree, recursively.</p></div></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="MooTreeControl.get"></a>get</h3><div class=CBody><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>Retrieves the node with the given id</td><td class=CDLDescription>or null, if no node with the given id exists.</td></tr></table><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>id</td><td class=CDLDescription>a string, the id of the node you wish to retrieve.</td></tr></table><h4 class=CHeading>Note</h4><p>Node id can be assigned via the <a href="#MooTreeNode" class=LClass id=link17 onMouseOver="ShowTip(event, 'tt3', 'link17')" onMouseOut="HideTip('tt3')">MooTreeNode</a> constructor, e.g. using the <a href="#MooTreeNode.insert" class=LProperty id=link18 onMouseOver="ShowTip(event, 'tt4', 'link18')" onMouseOut="HideTip('tt4')">MooTreeNode.insert</a> method.</p></div></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="MooTreeControl.adopt"></a>adopt</h3><div class=CBody><p>Adopts a structure of nested ul/li/a elements as tree nodes, then removes the original elements.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>id</td><td class=CDLDescription>a string representing the ul element to be adopted, or an element reference.</td></tr><tr><td class=CDLEntry>parentNode</td><td class=CDLDescription>optional, a <a href="#MooTreeNode" class=LClass id=link19 onMouseOver="ShowTip(event, 'tt3', 'link19')" onMouseOut="HideTip('tt3')">MooTreeNode</a> object under which to import the specified ul element.&nbsp; Defaults to the root node of the parent control.</td></tr></table><h4 class=CHeading>Note</h4><p>The ul/li structure must be properly nested, and each li-element must contain one a-element, e.g.:</p><blockquote><pre>&lt;ul id=&quot;mytree&quot;&gt;
  &lt;li&gt;&lt;a href=&quot;test.html&quot;&gt;Item One&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;test.html&quot;&gt;Item Two&lt;/a&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href=&quot;test.html&quot;&gt;Item Two Point One&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;test.html&quot;&gt;Item Two Point Two&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;test.html&quot;&gt;&lt;!-- icon:_doc; color:#ff0000 --&gt;Item Three&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre></blockquote><p>The &ldquo;href&rdquo;, &ldquo;target&rdquo;, &ldquo;title&rdquo; and &ldquo;name&rdquo; attributes of the a-tags are picked up and stored in the data property of the node.</p><p>CSS-style comments inside a-tags are parsed, and treated as arguments for <a href="#MooTreeNode" class=LClass id=link20 onMouseOver="ShowTip(event, 'tt3', 'link20')" onMouseOut="HideTip('tt3')">MooTreeNode</a> constructor, e.g.&nbsp; &ldquo;icon&rdquo;, &ldquo;openicon&rdquo;, &ldquo;color&rdquo;, etc.</p></div></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="MooTreeControl.disable"></a>disable</h3><div class=CBody><p>Call this to temporarily disable visual updates -- if you need to insert/remove many nodes at a time, many visual updates would normally occur.&nbsp; By temporarily disabling the control, these visual updates will be skipped.</p><p>When you&rsquo;re done making changes, call <a href="#MooTreeControl.enable" class=LProperty id=link21 onMouseOver="ShowTip(event, 'tt5', 'link21')" onMouseOut="HideTip('tt5')">MooTreeControl.enable</a> to turn on visual updates again, and automatically repaint all nodes that were changed.</p></div></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="MooTreeControl.enable"></a>enable</h3><div class=CBody><p>Enables visual updates again after a call to <a href="#MooTreeControl.disable" class=LProperty id=link22 onMouseOver="ShowTip(event, 'tt1', 'link22')" onMouseOut="HideTip('tt1')">MooTreeControl.disable</a></p></div></div></div>

<div class="CClass"><div class=CTopic><h2 class=CTitle><a name="MooTreeNode"></a>MooTreeNode</h2><div class=CBody><p>This class implements the functionality of a single node in a <a href="#MooTreeControl" class=LClass id=link24 onMouseOver="ShowTip(event, 'tt2', 'link24')" onMouseOut="HideTip('tt2')">MooTreeControl</a>.</p><h4 class=CHeading>Note</h4><p>You should not manually create objects of this class -- rather, you should use <a href="#MooTreeControl.insert" class=LProperty id=link25 onMouseOver="ShowTip(event, 'tt6', 'link25')" onMouseOut="HideTip('tt6')">MooTreeControl.insert</a> to create nodes in the root of the tree, and then use the similar function <a href="#MooTreeNode.insert" class=LProperty id=link26 onMouseOver="ShowTip(event, 'tt4', 'link26')" onMouseOut="HideTip('tt4')">MooTreeNode.insert</a> to create subnodes.</p><p>Both insert methods have a similar syntax, and both return the newly created <a href="#MooTreeNode" class=LClass id=link27 onMouseOver="ShowTip(event, 'tt3', 'link27')" onMouseOut="HideTip('tt3')">MooTreeNode</a> object.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>options</td><td class=CDLDescription>an object.&nbsp; See options below.</td></tr></table><h4 class=CHeading>Options</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>text</td><td class=CDLDescription>this is the displayed text of the node, and as such as is the only required parameter.</td></tr><tr><td class=CDLEntry>id</td><td class=CDLDescription>string, optional - if specified, must be a unique node identifier.&nbsp; Nodes with id can be retrieved using the <a href="#MooTreeControl.get" class=LProperty >MooTreeControl.get</a> method.</td></tr><tr><td class=CDLEntry>color</td><td class=CDLDescription>string, optional - if specified, must be a six-digit hexadecimal RGB color code.</td></tr><tr><td class=CDLEntry>open</td><td class=CDLDescription>boolean value, defaults to false.&nbsp; Use true if you want the node open from the start.</td></tr><tr><td class=CDLEntry>icon</td><td class=CDLDescription>use this to customize the icon of the node.&nbsp; The following predefined values may be used: &lsquo;_open&rsquo;, &lsquo;_closed&rsquo; and &lsquo;_doc&rsquo;.&nbsp; Alternatively, specify the URL of a GIF or PNG image to use - this should be exactly 18x18 pixels in size.&nbsp; If you have a strip of images, you can specify an image number (e.g.&nbsp; &lsquo;my_icons.gif#4&rsquo; for icon number 4).</td></tr><tr><td class=CDLEntry>openicon</td><td class=CDLDescription>use this to customize the icon of the node when it&rsquo;s open.</td></tr><tr><td class=CDLEntry>data</td><td class=CDLDescription>an object containing whatever data you wish to associate with this node (such as an url and/or an id, etc.)</td></tr></table><h4 class=CHeading>Events</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>onExpand</td><td class=CDLDescription>called when the node is expanded or collapsed: function(state) - where state is a boolean meaning true:expanded or false:collapsed.</td></tr><tr><td class=CDLEntry>onSelect</td><td class=CDLDescription>called when the node is selected or deselected: function(state) - where state is a boolean meaning true:selected or false:deselected.</td></tr><tr><td class=CDLEntry>onClick</td><td class=CDLDescription>called when the node is clicked (no arguments).</td></tr></table><!--START_ND_SUMMARY--><div class=Summary><div class=STitle>Summary</div><div class=SBorder><table border=0 cellspacing=0 cellpadding=0 class=STable><tr class="SGroup"><td class=SEntry><a href="#MooTreeNode.Properties" >Properties</a></td><td class=SDescription></td></tr><tr class="SProperty SIndent1 SMarked"><td class=SEntry><a href="#MooTreeNode.insert" >insert</a></td><td class=SDescription>Creates a new node, nested inside this one.</td></tr><tr class="SProperty SIndent1"><td class=SEntry><a href="#MooTreeNode.remove" >remove</a></td><td class=SDescription>Removes this node, and all of it&rsquo;s child nodes. </td></tr><tr class="SProperty SIndent1 SMarked"><td class=SEntry><a href="#MooTreeNode.clear" >clear</a></td><td class=SDescription>Removes all child nodes under this node, without removing the node itself. </td></tr><tr class="SProperty SIndent1"><td class=SEntry><a href="#MooTreeNode.update" >update</a></td><td class=SDescription>Update the tree node&rsquo;s visual appearance.</td></tr><tr class="SProperty SIndent1 SMarked"><td class=SEntry><a href="#MooTreeNode.getImg" >getImg</a></td><td class=SDescription>Creates a new image, in the form of HTML for a DIV element with appropriate style. </td></tr><tr class="SProperty SIndent1"><td class=SEntry><a href="#MooTreeNode.toggle" >toggle</a></td><td class=SDescription>By default (with no arguments) this function toggles the node between expanded/collapsed. </td></tr><tr class="SProperty SIndent1 SMarked"><td class=SEntry><a href="#MooTreeNode.select" >select</a></td><td class=SDescription>Called by <a href="#MooTreeControl" class=LClass id=link23 onMouseOver="ShowTip(event, 'tt2', 'link23')" onMouseOut="HideTip('tt2')">MooTreeControl</a> when the selection changes. </td></tr><tr class="SProperty SIndent1"><td class=SEntry><a href="#MooTreeNode.load" >load</a></td><td class=SDescription>Asynchronously load an XML structure into a node of this tree.</td></tr></table></div></div><!--END_ND_SUMMARY--></div></div></div>

<div class="CGroup"><div class=CTopic><h3 class=CTitle><a name="MooTreeNode.Properties"></a>Properties</h3></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="MooTreeNode.insert"></a>insert</h3><div class=CBody><p>Creates a new node, nested inside this one.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>options</td><td class=CDLDescription>an object containing the same options available to the <a href="#MooTreeNode" class=LClass id=link28 onMouseOver="ShowTip(event, 'tt3', 'link28')" onMouseOut="HideTip('tt3')">MooTreeNode</a> constructor.</td></tr></table><h4 class=CHeading>Returns</h4><p>A new <a href="#MooTreeNode" class=LClass id=link29 onMouseOver="ShowTip(event, 'tt3', 'link29')" onMouseOut="HideTip('tt3')">MooTreeNode</a> instance.</p></div></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="MooTreeNode.remove"></a>remove</h3><div class=CBody><p>Removes this node, and all of it&rsquo;s child nodes.&nbsp; If you want to remove all the childnodes without removing the node itself, use <a href="#MooTreeNode.clear" class=LProperty id=link30 onMouseOver="ShowTip(event, 'tt7', 'link30')" onMouseOut="HideTip('tt7')">MooTreeNode.clear</a></p></div></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="MooTreeNode.clear"></a>clear</h3><div class=CBody><p>Removes all child nodes under this node, without removing the node itself.&nbsp; To remove all nodes including this one, use <a href="#MooTreeNode.remove" class=LProperty id=link31 onMouseOver="ShowTip(event, 'tt8', 'link31')" onMouseOut="HideTip('tt8')">MooTreeNode.remove</a></p></div></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="MooTreeNode.update"></a>update</h3><div class=CBody><p>Update the tree node&rsquo;s visual appearance.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>recursive</td><td class=CDLDescription>boolean, defaults to false.&nbsp; If true, recursively updates all nodes beneath this one.</td></tr><tr><td class=CDLEntry>invalidated</td><td class=CDLDescription>boolean, defaults to false.&nbsp; If true, updates only nodes that have been invalidated while the control has been disabled.</td></tr></table></div></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="MooTreeNode.getImg"></a>getImg</h3><div class=CBody><p>Creates a new image, in the form of HTML for a DIV element with appropriate style.&nbsp; You should not need to manually call this method.&nbsp; (though if for some reason you want to, you can)</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>name</td><td class=CDLDescription>the name of new image to create, defined by &lt;MooTreeIcon&gt; or located in an external file.</td></tr></table><h4 class=CHeading>Returns</h4><p>The HTML for a new div Element.</p></div></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="MooTreeNode.toggle"></a>toggle</h3><div class=CBody><p>By default (with no arguments) this function toggles the node between expanded/collapsed.&nbsp; Can also be used to recursively expand/collapse all or part of the tree.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>recursive</td><td class=CDLDescription>boolean, defaults to false.&nbsp; With recursive set to true, all child nodes are recursively toggle to this node&rsquo;s new state.</td></tr><tr><td class=CDLEntry>state</td><td class=CDLDescription>boolean.&nbsp; If undefined, the node&rsquo;s state is toggled.&nbsp; If true or false, the node can be explicitly opened or closed.</td></tr></table></div></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="MooTreeNode.select"></a>select</h3><div class=CBody><p>Called by <a href="#MooTreeControl" class=LClass id=link32 onMouseOver="ShowTip(event, 'tt2', 'link32')" onMouseOut="HideTip('tt2')">MooTreeControl</a> when the selection changes.&nbsp; You should not manually call this method - to set the selection, use the <a href="#MooTreeControl.select" class=LProperty id=link33 onMouseOver="ShowTip(event, 'tt9', 'link33')" onMouseOut="HideTip('tt9')">MooTreeControl.select</a> method.</p></div></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="MooTreeNode.load"></a>load</h3><div class=CBody><p>Asynchronously load an XML structure into a node of this tree.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>url</td><td class=CDLDescription>string, required, specifies the URL from which to load the XML document.</td></tr><tr><td class=CDLEntry>vars</td><td class=CDLDescription>query string, optional.</td></tr></table></div></div></div>

</div><!--Content-->


<div id=Footer><a href="http://www.naturaldocs.org">Generated by Natural Docs</a></div><!--Footer-->


<div id=Menu><div class=MEntry><div class=MFile id=MSelected>mootree.js</div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent1')">Index</a><div class=MGroupContent id=MGroupContent1><div class=MEntry><div class=MIndex><a href="../index/General.html">Everything</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Classes.html">Classes</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Files.html">Files</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Properties.html">Properties</a></div></div></div></div></div><script type="text/javascript"><!--
var searchPanel = new SearchPanel("searchPanel", "HTML", "../search");
--></script><div id=MSearchPanel class=MSearchPanelInactive><input type=text id=MSearchField value=Search onFocus="searchPanel.OnSearchFieldFocus(true)" onBlur="searchPanel.OnSearchFieldFocus(false)" onKeyUp="searchPanel.OnSearchFieldChange()"><select id=MSearchType onFocus="searchPanel.OnSearchTypeFocus(true)" onBlur="searchPanel.OnSearchTypeFocus(false)" onChange="searchPanel.OnSearchTypeChange()"><option  id=MSearchEverything selected value="General">Everything</option><option value="Classes">Classes</option><option value="Files">Files</option><option value="Properties">Properties</option></select></div></div><!--Menu-->



<!--START_ND_TOOLTIPS-->
<div class=CToolTip id="tt1"><div class=CProperty>Call this to temporarily disable visual updates -- if you need to insert/remove many nodes at a time, many visual updates would normally occur. </div></div><div class=CToolTip id="tt2"><div class=CClass>This class implements a tree control.</div></div><div class=CToolTip id="tt3"><div class=CClass>This class implements the functionality of a single node in a MooTreeControl.</div></div><div class=CToolTip id="tt4"><div class=CProperty>Creates a new node, nested inside this one.</div></div><div class=CToolTip id="tt5"><div class=CProperty>Enables visual updates again after a call to MooTreeControl.disable</div></div><div class=CToolTip id="tt6"><div class=CProperty>Creates a new node under the root node of this tree.</div></div><div class=CToolTip id="tt7"><div class=CProperty>Removes all child nodes under this node, without removing the node itself. </div></div><div class=CToolTip id="tt8"><div class=CProperty>Removes this node, and all of it&rsquo;s child nodes. </div></div><div class=CToolTip id="tt9"><div class=CProperty>Sets the currently selected node. </div></div><!--END_ND_TOOLTIPS-->




<div id=MSearchResultsWindow><iframe src="" frameborder=0 name=MSearchResults id=MSearchResults></iframe><a href="javascript:searchPanel.CloseResultsWindow()" id=MSearchResultsWindowClose>Close</a></div>


<script language=JavaScript><!--
if (browserType) {if (browserVer) {document.write("</div>"); }document.write("</div>");}// --></script></body></html>